<template>
    <el-container>
        <el-header>
            浪仔积分管理系统
        </el-header>
        <el-main>
            <div class="export">
                <el-popover placement="right" width="400" trigger="hover">
                    <p>本系统没有连接服务器，数据只存在于缓存中，如果想清除浏览器缓存，请先导出数据，清除浏览器缓存后，再点击导入数据。否正数据将丢失，联系管理员都没用！！！</p>
                    <div style="text-align: right">
                        <el-button @click="exportData">导出</el-button>
                        <div class="file">
                            <input type="file" id="read" @change="importData" accept= "application/json">
                            <el-button type="primary">导入</el-button>
                        </div>
                    </div>
                    <template #reference>
                        <i class="el-icon-warning-outline"></i>
                    </template>
                </el-popover>
            </div>
            <el-tabs v-model="activeName" tab-position="left" type="border-card">
                <el-tab-pane name="user" label="会员管理"><User @openRecord="openRecord"></User></el-tab-pane>
                <el-tab-pane name="record" label="交易记录"><Record ref="record"></Record></el-tab-pane>
                <el-tab-pane name="commodity" label="商品管理"><Commodity></Commodity></el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script>
import User from "./User/User.vue";
import Commodity from "./Commodity/Commodity.vue";
import Record from "./Record/Record.vue"
import { getForm, setForm } from "../api/ajax.js";

export default {
    name: 'Base',
    components: { User, Commodity, Record },
    computed: {},
    data() {
        return {
            activeName: 'user'
        }
    },
    methods: {
        openRecord(user) {
            console.log(user);
            this.activeName = 'record'
            this.$refs.record.queryValue.name = user.name
            this.$refs.record.queryValue.phone = user.phone
            this.$refs.record.queryList()

            console.log(this.$refs);
        },
        exportData() {
            const filename = '会员数据.json';
            const contentType = 'json';
            const content = JSON.stringify({
                Commodity: getForm('Commodity'),
                User: getForm('User'),
                Record: getForm('Record'),
            });
            const a = document.createElement('a');
            const blob = new Blob([content], { 'type': contentType });
            a.href = window.URL.createObjectURL(blob);
            a.download = filename;
            a.click();
        },
        importData(event) {
            console.log(event);
            const e = event.target
            const reader = new FileReader(); //新建一个FileReader
            console.log(e.value);
            reader.readAsText(e.files[0], "UTF-8"); //读取文件
            reader.onload = function(evt) { //读取完文件之后会回来这里
                try {
                    const data = JSON.parse(evt.target.result) // 读取文件内容
                    console.log(data);

                    const a2o = arr => Object.fromEntries(arr.map(item => [item.id, item]));
                    ['Commodity', 'User', 'Record'].forEach(i => {
                        const newData = a2o(data[i]) || []
                        console.log(newData);
                        let local = a2o(getForm(i))
                        console.log(local);
                        setForm(i, Object.values({
                            ...newData,
                            ...local
                        }))
                    })
                    alert('读取文件成功')
                } catch (e) {
                    alert('读取文件失败，请联系管理员')
                }
            }
        }
    },
    mounted() {
    }
}
</script>

<style scoped lang="less">
.el-header {
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    line-height: 60px;

}
.el-main {
    padding: 0;
    position: relative;
}
.el-tabs {
    height: calc(100vh - 62px);
}
.export {
    position: absolute;
    left: 36px;
    bottom: 30px;
    z-index: 100;
    .el-icon-warning-outline {
        font-weight: 700;
        color: #f00;
        font-size: 20px;
    }
}
.file {
    width: 70px;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    #read {
        opacity: 0;
        position: absolute;
        box-sizing: border-box;
        z-index: 100;
        width: 70px;
        left: 0;
        top: 0;
        height: 100%;
    }
}
</style>
